<template>
	<!-- 角色列表页面 -->
	<echelon-solutions>
		<!-- 这里是顶部导航栏 -->
		<skyline-navigation title="角色管理"> </skyline-navigation>
		<!-- 这里是中间区域 -->
		<central-hub>
			<MyPopup v-model="RolesVisible">
				<MyForm :fields="formFields" @submit="submitForm" submit-text="提交"></MyForm>
			</MyPopup>
			<view >
				<view class="flexGap">
					<button type="primary" @click="handleAdd()">新增</button> 
				</view>
				<MyTreeTable :columns="columnsRoles" :dataSource="dataSourceRoles" style="zoom: .7;">
					<template #operate="{ data }">
						<view class="flexGap">
							<button type="primary" @click="handleEdit(data)">编辑</button>
							<button type="warn" @click="handleDelete(data)">删除</button>
						</view>
					</template>
				</MyTreeTable>
			</view>
			<MyPopup v-model="PermissionVisible">
				<view >
					<view class="flexGap">
						<button type="primary" @click="handleRolePermissions()">提交</button>
					</view>
					<view class="flexGap">
						角色名称:<my-input type="text" v-model="PermissionForm.role_name" />
					</view>
					<MyTreeTable  style="height: 60vh;overflow: scroll;zoom: .7;" :columns="columnsPermission" :dataSource="dataSourcePermission" selectable
						v-model="selectedRowsPermission">
					</MyTreeTable>
				</view>
			</MyPopup>
		</central-hub>
	</echelon-solutions>
</template>

<script> 
	export default {
		methods: {
			handleRolePermissions() {
				const selectedIds = this.selectedRowsPermission.map(item => item.id);
				const permission_id = selectedIds.join(',');
				const {
					id,
					role_name
				} = this.PermissionForm;
				this.$updatePublic('role', {
					permission_id,
					id,
					role_name,
				}, async () => {
					this.dataSourceRoles = await this.$listPublic('role');
				});
				this.PermissionVisible = false;
			},
			// 提交
			submitForm(formData) {
				this.$createPublic('role', formData, async () => {
					this.handleAdd();
					this.dataSourceRoles = await this.$listPublic('role');
				});
			},
			// 新增
			handleAdd() {
				this.RolesVisible = !this.RolesVisible;
			},
			// 修改
			async handleEdit(data) {
				this.PermissionForm = {
					...data
				};
				this.dataSourcePermission = await this.$listPublic('permission', data);
				this.PermissionVisible = true;
				this.selectedRowsPermission = this.dataSourcePermission.filter(v => v.status)
			},
			// 删除
			handleDelete(data) {
				this.$removePublic('role', data, async () => {
					this.dataSourceRoles = await this.$listPublic('role');
				});
			}, 
		},
		onLoad() {
			(async () => {
				this.dataSourceRoles = await this.$listPublic('role');
			})()
		},
		data() {
			return {
				selectedRowsPermission: [],
				RolesVisible: false,
				PermissionVisible: false,
				formFields: [{
					label: "角色名称",
					type: "text",
					name: "role_name",
					value: "",
					required: true
				}],
				columnsRoles: [
					{
						title: 'ID',
						key: 'id',
						fixed: 'left',
					},
					{
						title: '角色名称',
						key: 'role_name'
					},
					{
						title: '操作',
						key: 'operate',
						fixed: '',
					}
				],
				dataSourceRoles: [],
				columnsPermission: [
					// {
					// 	title: 'ID',
					// 	key: 'id',
					// 	fixed: 'left',
					// },
					{
						title: '描述',
						key: 'description'
					},
					{
						title: '权限名称',
						key: 'name'
					}

				],
				dataSourcePermission: [],
				PermissionForm: {}
			}
		}
	}
</script>
<style scoped>
	.flexGap {
		padding: 6px;
		box-sizing: border-box;
	}
</style>